<template>
  <div ref="warp" class="contentWarpBox">
    <div class="searchInfo">
      <div class="left">
        <el-select
          v-model="getSearchInfo.projectType"
          placeholder="商机类别"
          :class="$style.cartgroy"
          clearable
          style="width:120px;marginRight:5px;"
        >
          <el-option
            v-for="item in businessCategory.children"
            :key="item.dicName"
            :label="item.dicName"
            :value="item.dicCode"
          />
        </el-select>
        <el-select
          v-model="getSearchInfo.status"
          clearable
          placeholder="是否上架"
          :class="$style.cartgroy"
          style="width:120px;marginRight:5px;"
        >
          <el-option
            v-for="item in orStatus"
            :key="item.name"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="getSearchInfo.projectName"
          style="width:120px;marginRight:5px;"
          placeholder="商机名称"
          :class="$style.Business"
        />
        <el-input
          v-model="getSearchInfo.investmentMin"
          style="width:120px;marginRight:5px;"
          placeholder="最小投资金额"
          :class="$style.cost"
        />~
        <el-input
          v-model="getSearchInfo.investmentMax"
          style="width:120px;marginRight:5px;"
          placeholder="最大投资金额"
          :class="$style.cost"
        />
        <span style="marginRight:5px;">万元</span>
        <el-button type="primary" @click="searchInfoMations">搜 索</el-button>
      </div>
      <el-button
        v-if="accreditChildren.createBusiness"
        class="right"
        type="primary"
        @click="jump('create')"
      >新建商机</el-button>
    </div>
    <el-table
      ref="table"
      stripe
      :data="tableData"
      style="width: 100%"
      border
      :height="this.$getTableHeight"
    >
      <el-table-column prop="name" label="商机名称" show-overflow-tooltip>
        <template slot-scope="scope">
          <span
            class="blue"
            @click.stop="changeActive(scope.row.id)"
          >{{ scope.row.id ? scope.row.projectName :"&nbsp;" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="projectName" label="所属公司" show-overflow-tooltip />
      <el-table-column label="经营种类" prop="category" show-overflow-tooltip />
      <el-table-column prop="birthplace" label="品牌源地" show-overflow-tooltip />
      <el-table-column label="商机类别" show-overflow-tooltip>
        <template slot-scope="scope">{{ getDicName1({val:scope.row.projectType,key:'商机类别'}) }}</template>
      </el-table-column>
      <el-table-column prop="cost" label="投资金额" show-overflow-tooltip>
        <template
          slot-scope="scope"
        >{{ scope.row.investmentMin ||scope.row.investmentMax ?`${scope.row.investmentMin}-${scope.row.investmentMax}万元` :'' }}</template>
      </el-table-column>
      <el-table-column prop="suitCrowd" label="适应人群" show-overflow-tooltip />
      <el-table-column label="是否上架" show-overflow-tooltip>
        <template
          slot-scope="scope"
        >{{ scope.row.status===true ? "是" :scope.row.status===false? "否":'' }}</template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <div v-if="scope.row.id">
            <span v-if="accreditChildren.upBusiness">
              <span
                v-if="scope.row.status===true"
                class="_primary"
                @click="businessUp(scope.row,'down')"
              >下架</span>
              <span v-else class="_primary" @click="businessUp(scope.row,'up')">上架</span>
            </span>
            <span
              v-if="accreditChildren.deleteBusiness"
              class="_delete"
              @click="deleteBusiness(scope.row)"
            >删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination clearfix">
      <Pagination
        class="right"
        :total-count="totalCount"
        :page-size="page.pageSize"
        :current-page="page.pageNo"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      />
    </div>
    <div :class="active ? 'closeRightBox trans':'openRightBox trans'" @click.stop>
      <detail
        v-if="active"
        :id="jumpId"
        :accredit-children="accreditChildren"
        :page-height="pageHeight"
        :update-right="updateRight"
        @clearJumpId="clearJumpId"
        @editor="openDialog"
      />
    </div>
    <div v-if="dialogVisible" @click.stop>
      <el-dialog
        :title="isCreate ? '新建商机' : '编辑商机'"
        center
        :visible.sync="dialogVisible"
        width="800px"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <createAdver :id="jumpId" @closeDialog="handleClose" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import mmUrl from '~/utils/utilUrl'
import {
  reduceArr,
  _currentChange,
  _sizeChange,
  _changeTable,
  _deleteMethods,
  _searchInfo,
  getDicName,
  createDics,
  changeTableHeight
} from '~/utils/util'
import Pagination from '~/components/commom/pagination'
import createAdver from '~/components/business/create'
import detail from '~/components/business/detail'
import initData from '~/utils/initData'
export default {
  components: {
    Pagination,
    createAdver,
    detail
  },
  data() {
    return {
      checkList: false,
      dialogVisible: false,
      updateRight: false,
      active: false,
      jumpId: '',
      isCreate: false,
      accreditArr: {},
      accreditChildren: {},
      loading: true,
      changeSelectOr: false,
      change: false,
      dics: [],
      projectType: [],
      handleSelectionArr: [], // 多选框选中的数据
      tableData: [], // talbe表格数据
      businessCategory: [],
      category: [],
      totalCount: 0,
      orStatus: [
        {
          name: '是',
          value: true
        },
        {
          name: '否',
          value: false
        }
      ],
      getSearchInfo: {
        status: '',
        category: '',
        investmentMax: '',
        investmentMin: '',
        keyword: '',
        projectName: '',
        projectType: '',
        sortType: ''
      },
      copySearchInfo: {
        status: '',
        category: '',
        investmentMax: '',
        investmentMin: '',
        keyword: '',
        projectName: '',
        projectType: '',
        sortType: ''
      },
      page: {
        maxResultCount: 0,
        pageNo: 0,
        pageSize: 20,
        skipCount: 0
      }
    }
  },
  watch: {
    'getSearchInfo.investmentMin'(newd) {
      const result = newd.trim()
      const isNumber = isNaN(result)
      isNumber ? (this.getSearchInfo.investmentMin = '') : result
    },
    'getSearchInfo.investmentMax'(newd) {
      const result = newd.trim()
      const isNumber = isNaN(result)
      isNumber ? (this.getSearchInfo.investmentMax = '') : result
    },
    handleSelectionArr(newd) {}
  },
  mounted() {
    const pathStr = this.$route.path
    this.initGetDate()
    const result = JSON.parse(sessionStorage.getItem('menu'))
    this.accreditArr = reduceArr(result, '/' + this.$route.name)
    this.accreditChildren = createDics(
      this.accreditArr.children,
      'permissionCode'
    )
  },
  methods: {
    businessUp(row, status) {
      this.$confirm(
        status === 'up'
          ? '正在执行上架操作,是否继续'
          : '正在执行下架操作,是否继续',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$post({
            url: '/manage/project/approvalProjectsInput',
            data: {
              ids: [row.id],
              status: status === 'up'
            }
          }).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.searchInfoMations()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: status === 'up' ? '已取消上架操作' : '已取消下架操作'
          })
        })
    },
    handleClose() {
      this.dialogVisible = false
      this.updateRight = !this.updateRight
      this.searchInfoMations('no')
    },
    clearJumpId() {
      this.active = false
      this.jumpId = null
    },
    openDialog() {
      this.isCreate = false
      this.dialogVisible = true
    },
    changeActive(id) {
      this.active = true
      this.jumpId = id
    },
    jump(id) {
      this.dialogVisible = true
      this.jumpId = id
      id === 'create' ? (this.isCreate = true) : (this.isCreate = false)
    },
    getDicName1(res) {
      return getDicName({
        data: this.dics,
        field: res.key,
        dicCode: res.val
      })
    },
    initGetDate() {
      this.$post({
        url: mmUrl.project.pageLoad,
        data: this.getSearchInfo
      }).then(res => {
        this.totalCount = res.items.totalCount
        const result1 = createDics(res.dics, 'dicCode')
        this.businessCategory = result1.PROJECT_TYPE
        this.category = res.TYPE_BUSINESS
        this.dics = res.dics
        this.tableData = res.items.items
        this.loading = false
        changeTableHeight(this)
      })
    },
    changeTableData(res) {
      const that = this
      _changeTable(mmUrl.project.getProjectPage, res, that)
    },
    handleSizeChange(val) {
      const result = _sizeChange(val, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    handleCurrentChange(val) {
      const result = _currentChange(val, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    searchInfoMations(res) {
      this.copySearchInfo = JSON.parse(JSON.stringify(this.getSearchInfo))
      const result = _searchInfo(res, this.page, this.copySearchInfo)
      this.changeTableData(result)
    },
    deleteBusiness(row) {
      const that = this
      _deleteMethods(mmUrl.project.deleteProject, row, that).then(() => {
        that.searchInfoMations('no')
      })
    }
  }
}
</script>

<style lang="scss" module>
.margin3 {
  display: inline-block;
  padding-right: 10px;
  span {
    padding: 0 10px;
  }
}
.cont_top {
  height: 50px;
  .cost {
    display: inline-block !important;
    width: 102px;
  }
  .Business {
    width: 120px;
  }
  .cartgroy {
    display: inline-block !important;
    width: 120px;
  }
  input {
    border-radius: 5px;
  }
}
</style>

